<%--
  Created by IntelliJ IDEA.
  User: liujie
  Date: 2016/9/5
  Time: 16:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>微调查微问答</title>
    <link rel="stylesheet" href="<c:url value='/resource/exam/css/frozen.css'></c:url>">
    <link rel="stylesheet" href="<c:url value='/resource/exam/css/main.css'></c:url>">
    <script language="JavaScript" src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
    <script language="JavaScript" src="<c:url value='/resource/js/jquery.form.min.js'/>"></script>
</head>

<body ontouchstart>
<%--<header class="ui-header ui-header-positive ui-border-b">
    <i class="ui-icon-return" onclick="history.back()"></i>
    <h1>微调查微问答</h1>
</header>--%>
<section class="ui-container">
    <h1 class="jzxx_tit">${survey.name}</h1>
    <div style="clear: both;"></div>
    <form id="surveyform" method="post" >
        <input type="hidden" name="count" value=${count} />

    <div id="action_div" class="ui-btn-wrap">
        <button class="ui-btn-lg ui-btn-primary" id="wdc_but" type="button">
            提交
        </button>
    </div>
    </form>
    <section id="dialog">
        <div class="demo-item">
            <div class="demo-block" id="wdc_pop">
                <div class="ui-dialog"  id="wdc_dialog">
                    <div class="ui-dialog-cnt wdc_pop">
                        <header class="ui-dialog-hd ui-border-b">
                            <h3>提示</h3>
                            <i class="ui-dialog-close" data-role="button"  id="pop_close"></i>
                        </header>
                        <div class="ui-dialog-bd">

                            <div>你的答卷已经提交，感谢您的参与！</div>
                        </div>
                        <div class="ui-dialog-ft">
                            <button type="button" data-role="button" id="pop_enter">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
</body>

<script type="text/javascript">
    var questions = ${questionList};

    //添加一条题目
    function addOneQuestion(question,index){
        var questionStartModel = '<div class="demo-item"><p class="demo-desc wdc_p">$1</p><input type="hidden" name="$2" value="$3"/><div class="demo-block"><div class="ui-form ui-border-t">';
        var questionEndModel = '</div></div></div>';
        var radioOptionModel = '<div class="ui-form-item ui-form-item-radio ui-border-b"><label class="ui-radio" for="radio"><input type="radio"  name="$1" value="$2"/></label><p>$3</p></div>';
        var options = question.options;
        var questionHtml = questionStartModel.replace('$1',(index+1)+' . '+question.title).replace('$2', 'question'+index).replace('$3', question.id);
        for(var i=0;i<options.length;i++) {
            questionHtml = questionHtml + radioOptionModel.replace('$1', 'option'+index).replace('$2', options[i].id).replace('$3', options[i].name);
        }
        questionHtml = questionHtml + questionEndModel;
        $("#action_div").before(questionHtml);
    }

    /**
     * 提交结果
     */
    function submitForm(){
        $("#surveyform").ajaxSubmit({
            type: 'post', // 提交方式 get/post
            url: "<c:url value='/api/survey/submit'></c:url>", // 需要提交的 url
            success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
//                console.log(data);
            }
        });
    }

    $(function(){
        $("#wdc_but").click(function(){
            submitForm();
            $("#wdc_pop").show();
            $("#wdc_dialog").show();
        })
        $("#pop_enter").click(function(){
            $("#wdc_pop").hide();
            $("#wdc_dialog").hide();
        })
        $("#pop_close").click(function(){
            $("#wdc_pop").hide();
            $("#wdc_dialog").hide();
        })

        if(questions!=null&&questions.length>0){
            for (var i=0;i<questions.length;i++){
                addOneQuestion(questions[i],i);
            }
        }
    })
</script>
</html>
